<template>
  <div>
  <mu-flexbox class="bgwhite confirm-wrapper" :class="['mt'+ margin ]">
    <mu-flexbox-item :grow="1"  class="list-left">
      <slot name="left">
        <div class="confirm-hospital">{{title}}</div>
      </slot>
    </mu-flexbox-item>
    <mu-flexbox-item  :grow="2" class="list-right">
      <slot><div class="confirm-message">{{desc}}</div></slot>
    </mu-flexbox-item>
  </mu-flexbox>
    <mu-divider></mu-divider>
  </div>
</template>

<script>
export default {
  name: 'common-list',
  props: ['title', 'desc', 'margin']
}
</script>

<style lang="less">
@import '../common/css/vars.less';
.confirm-wrapper {
  padding:0;
  .confirm-depart {
    color: @color-primary;
    font-size: 1.3em;
  }
  .confirm-hospital {
    color: lighten(@color-gray, 0%);
    padding: 10px;
  }
  .confirm-message {
    text-align: right;
    padding: 10px;
    .iconfont {
      font-size: 1em;
    }
  }
  .confirm-money {
    color: @color-warning;
    font-size: 2em;
    text-align: right;
    padding-right: 10px;
  }
  .confirm-success {
    font-size: 2em;
    text-align: center;
    color: @color-gray;
    padding-bottom: 1em;    
  }
  .confirm-icon {
    text-align: center;
    .iconfont {
      color: @color-success;
      font-size: 4em;
    }
  }
}
</style>
